<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../jquery/jquery-3.6.0.js"></script>
    <script src="../../../wheels/data_utils/math_util.js"></script>
    <script src="../../../wheels/page_utils/anim_util.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nightsky {
            width: 900px;
            height: 600px;
            background-color: #333;
            border: 10px solid hotpink;
            margin: 30px auto;
            position: relative;
        }

        .fire {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="nightsky"></div>

    <script>
        const nightsky = document.querySelector(".nightsky")
        const nsWidth = nightsky.clientWidth
        const nsHeight = nightsky.clientHeight
        console.log("nsHeight", nsHeight);

        // 创建一朵烟花
        function createFire(left, top) {
            const fire = document.createElement("span")
            fire.className = "fire"
            fire.style.left = left
            fire.style.top = top
            fire.style.backgroundColor = getRandomColor()
            nightsky.appendChild(fire)

            return fire
        }

        // 烟花飞溅
        function splash(n,timecost=500) {
            for (let i = 0; i < n; i++) {
                const f = createFire(
                    e.offsetX + "px", e.offsetY + "px"
                )

                animate(
                    f,
                    {
                        left: getRandom(0, nsWidth) + "px",
                        top: getRandom(0, nsHeight) + "px",
                        alpha: 0
                    },
                    timecost,
                    () => {
                        f.remove()
                    })
            }
        }

        nightsky.onclick = function (e) {
            console.log(e.offsetX, e.offsetY);

            // 在夜空底部出现一朵烟花
            const fire = createFire(e.offsetX + "px", nsHeight + "px")

            // 升空
            animate(fire, { top: e.offsetY + "px" }, 500, () => {
                fire.remove()

                // 造一堆烟花
                splash(getRandom(20, 50))
            })
        }
    </script>
</body>

</html>